
<template>
  <div class="AsideNav">
    <AvatarDropDown class="AvatarDropDown" v-show="showAvartar"></AvatarDropDown>

      <div class="TopBox">

        <div class="avatar" @click="showAvartar=!showAvartar">

          <el-avatar v-if="circleUrl"  :src="circleUrl" @error="errorHandler">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
          </el-avatar>

          <el-avatar v-else  > {{getFirstCharacter(username)}} </el-avatar>

        </div>
      
        <div class="FunctionBox" v-for="(item,index) in fonts" :key="index"
        :class="{active:selectedIndex===index}"
        @click="toggleColor(index,item.path)"
        >
         <i :class="['iconfont',item.icon] "></i>
          <span>{{item.name}}</span>
        </div>


      </div>

      <div class="BottomBox">
  
      <div class="FunctionBox">
        <i class="iconfont icon-jia"></i>
        <span>添加</span>
      </div>

      <div class="FunctionBox">
        <i class="iconfont icon-xiazai"></i>
        <span>下载</span>
      </div>
    </div>

  </div>
</template>
<script>

import AvatarDropDown from './AvatarDropDown.vue'
import circleUrl from '@/assets/logo.png'

export default {
   name:'AsideNavBar',
  data() {
    return {
      username:"张三",
      circleUrl:circleUrl,
      fonts:[
     {name:"消息",icon:"icon-xiaoxi",path:"ChatRoom"},
     {name:"知识库",icon:"icon-knowledge-full",path:"KnowledgeBase"},
     {name:"归档",icon:"icon-guidang",path:"Archive"},
     {name:"我的",icon:"icon-wode",path:"MyPerson"},
      ],
    
      selectedIndex:0,
      showAvartar:false,
    };
  },
  components:{
    AvatarDropDown ,
  },
  methods: {
    //点击切换颜色,并且跳转页面
    toggleColor(index,path) {

      if (this.selectedIndex === index) {
    return; // 当前选项已经被选中，不执行跳转操作
   }

     this.selectedIndex = index;
     console.log("跳转了", path);

      //路由跳转
      this.$router.replace({name:path});//指定跳转路由的名字
      //push路由跳转，适合用来传参。通过push进行跳蛛路由的名字下
      // this.$router.push({name:path});
    },
  //头像加载错误处理
  errorHandler() {
      
    return true;
      },
      //获取姓
      getFirstCharacter(name) {
      if (name && name.length > 0) {
        return name.charAt(0); // 返回姓名的第一个字
      } else {
        return ""; // 姓名为空时返回空字符串
      }
    },

  }

}
</script>

<style scoped>
.AsideNav{
   display:flex;
   flex-direction:column;
   align-items: center;
   justify-content: space-between;
   position: relative;
}
.AvatarDropDown{
  width: 300px;
  background: orange;
  position: absolute;
  left: 107%;
  top: 4%;
  z-index: 9999;
}
.TopBox{
   margin-top:20px;

}
.BottomBox {
  margin-bottom: 20px;
}

.FunctionBox,.avatar{
  padding-top: 10px;
  height:60px;
  width: 80px;
  display: flex;
  flex-direction:column;
  align-items: center;

}

.FunctionBox:hover{
  background-color: rgba(225, 227, 230);
}
  .active{
    background-color: rgba(225, 227, 230);
  }
  .wode{
   margin-bottom: 100px;
  }
</style>